<template>
  <div class="home">
    <div class="g-header-container" >
      <home-header :class="{'header-transition':ifHeaderTransition}" ref="header"/>
    </div>
    <me-scroll
      ref="scroll"
      :data="recommendInfo"
      :ifImagShow ="false"
      :pullUpShow ="true"
      :pullDownShow="true"
      @scroll="scroll"
      @scrollEnd="scrollEnd"
      @pullDown="refresh"
      @pullUp="loadMore"
      @pull-down-transition-end="pullDownTransitionEnd">
      <home-banner
        ref="homeBanner"
      />
      <home-nav/>
      <home-recommend
        @loaded="getRecommendInfo"
        ref="homeRecommend"/>
    </me-scroll>
    <div class="g-backtop-container" ref="backTopWrapper" v-if="ifBackTopShow">
      <me-back-top @backTop="backTop"/>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import homeHeader from './home-header'
import homeBanner from './home-banner'
import homeNav from './home-nav'
import homeRecommend from './home-recommend'
import meScroll from '@/base/me-scroll'
import meBackTop from '@/base/me-back-top'
export default {
  name: 'home',
  components: {
    meBackTop,
    homeHeader,
    homeBanner,
    homeNav,
    homeRecommend,
    meScroll
  },
  data () {
    return {
      ifBackTopShow: false, // 是否返回顶部
      ifHeaderShow: true, // 是否显示头部,
      ifHeaderTransition: false, // 是否改变头部背景色
      recommendInfo: [] // 推荐商品数据
    }
  },
  methods: {
    backTop () { // 回到顶部
      this.$refs.scroll.scrollToTop()
    },
    scroll (swiper, translate) { // 拖拽事件
      this.ifBackTopShow = -translate > swiper.height // 若向上拖拽距离比swiper-container大，显示返回顶部图标
      this.changeHeaderStatus(translate)
    },
    scrollEnd (swiper, translate, pulling) { // 滑动事件
      this.ifBackTopShow = -translate > swiper.height // 若向上滑动停止时的距离比swiper-container的高度大，显示返回顶部图标
      if (!pulling) {
        this.changeHeaderStatus(translate)
      }
    },
    refresh (end) { // 刷新
      this.$refs.homeBanner.update().then(
        () => {
          setTimeout(end, 1000)
        }
      )
    },
    loadMore (end) { // 加载更多
      this.$refs.homeRecommend.update().then(
        () => setTimeout(end, 1000),
        err => {
          end()
          this.$refs.scroll.noMoreData('没有更多内容啦')
          this.$refs.scroll.hideImage()
          console.log(err)
        }
      )
      console.log('晚上好')
    },
    getRecommendInfo (data) { // 将获取的推荐页数据赋值给this.recommendInfo，进而传递给子组件
      this.recommendInfo = data
    },
    changeHeaderStatus (translate) {
      if (translate > 0) {
        this.$refs.header.hide()
        return
      }
      this.$refs.header.show()
      this.ifHeaderTransition = -translate > 50 // 当向上拖拽的距离大于50px时，头部背景色改变
      // this.ifHeaderShow = translate < 0 // 若向下拖拽，则隐藏头部
    },
    pullDownTransitionEnd () {
      setTimeout(() => {
        this.$refs.header.show()
      }, 300)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/stylus/variables'
.home
  width 100%
  height 100%
</style>
